<template>
	<view class="gt-header">
		<!-- 底层占位 -->
		<gt-status-bar></gt-status-bar>
		<view class="gt-header-content"></view>
		<slot name="bottom"></slot>
		<!-- 顶层悬浮 -->
		<view class="gt-header-up"
			:style="{color:textColor,'background-color':backgroundColor,'position':fixed ? 'fixed' : 'absolute'}">
			<gt-status-bar></gt-status-bar>
			<!-- 左部 -->
			<view class="gt-header-content container">
				<view class="gt-header-left">
					<slot name="left">
						<view v-if="goBack" @click="skipGoBack()" class="row align-center">
							<uni-icons type="back" size="26" :color="textColor"></uni-icons>
							<view>{{goBackText}}</view>
						</view>
					</slot>
				</view>
				<!-- 中部 -->
				<view class="gt-header-middle">
					<slot name="middle">{{title}}</slot>
				</view>
				<!-- 右部 -->
				<view class="gt-header-right">
					<slot name="right"></slot>
				</view>
			</view>
		</view>

	</view>

</template>

<script>
	export default {
		name: "gt-header",
		props: {
			title: {
				type: [String,null],
				default: function() {
					return ''
				}
			},
			goBackUrl: {
				type: String,
				default: function() {
					return ''
				}
			},
			goBack: {
				type: Boolean,
				default: function() {
					return true;
				}
			},
			goBackText: {
				type: String,
				default: function() {
					return '';
				}
			},
			backgroundColor: {
				type: String,
				default: function() {
					return ''
				}
			},
			textColor: {
				type: String,
				default: function() {
					return ''
				}
			},
			fixed: {
				type: Boolean,
				default: function() {
					return true
				}
			},
		},
		data() {
			return {}
		},
		created() {},
		computed: {},
		methods: {
			skipGoBack() {
				if (this.goBackUrl) {
					this.$skip.to(this.goBackUrl);
				} else {
					this.$skip.goBack();
				}

			}
		}
	}
</script>

<style scoped lang="scss">
	/* 顶部导航 */
	.gt-header {
		width: 100%;
		position: relative;
		font-size: 15px;
		line-height: 44px;
	}

	.gt-header-up {
		top: 0;
		left: 0;
		width: 100%;
		z-index: 9;
		background-color:#3EAFFF;
		color:#fff;
		/* box-shadow: 2px 2px 5px #eee; */
	}

	.gt-header-content {
		height: 44px;
		padding: 0 15px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
	}

	.gt-header-left {
		cursor: pointer;
		min-width: 44px;
		height: 44px;
	}

	.gt-header-middle {
		text-align: center;
		font-size: 18px;
		font-weight: 600;
	}

	.gt-header-right {
		min-width: 44px;
		height: 44px;
	}

	.gt-header-icon {
		line-height: 44px;
	}
</style>